<template>
    <div>
      <el-row>
        <el-col :span="6">
          <el-tree :data="customerImageData" @node-click="previewClick" @node-contextmenu="handleNodeContextMenu"></el-tree>
        </el-col>
        <el-col :span="18">
          <el-card>
            <div style="height: 1000px;">
              <!-- 预览附件的位置 -->
              <el-tabs v-model="activeTabName">
                  <el-tab-pane  
                    v-for="file in activeFiles"  
                    :key="file.id"  
                    :label="file.label"  
                  >
                    <div class="imageView">
                      <el-image
                      v-if="file.suffix  === 'jpg' || file.suffix  === 'jpeg' || file.suffix  === 'png'"
                      style="width: 100%; transition: transform 0.3s ease" 
                      :src="file.fileBase64"
                      :fit="fit"
                      :class="{'zoomed': isZoomed}"
                      ></el-image>
                      <iframe  
                        v-else-if="file.suffix === 'pdf'"  
                        :src="file.fileBase64"  
                        style="width: 100%;height: 100%;" 
                      ></iframe> 
                    </div>
                    <br/>
                    <span style="font-size:medium;">{{text}}</span> 
                  </el-tab-pane>
              </el-tabs>
              
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script>
    import Axios from "axios";
    //import pdf from 'vue-pdf'


  export default {
    name: 'customerImageView',
    components: {  
      //pdf  
    },  
    props:["idNumber","sqbh"],
      
    data() {
      return {
        currentPage: 1, // 当前显示的PDF页码 src: 'http://localhost:9195/WechatIMG12022.jpg',
        customerImageData:[],
        // customerImageData: [
        //   {
        //     label:"applSeq",
        //     children:[
        //             {
        //             label: '测试',
        //             children: [
        //               {
        //                 file:"20240730103350894s4961b10001.pdf",
        //                 applSeq:"10042024073012648159",
        //                 fileBase64:"",
        //                 label: '测试 1',
        //                 type: 'file',
        //                 status:true,
        //                 fileType:'jpg',
        //                 suffix:'jpg'

        //               },
        //               {
        //                 file:"20240730103350894s4961b10001.pdf",
        //                 applSeq:"10042024073012648159",
        //                 src:"",
        //                 label: '测试 2',
        //                 type: 'file',
        //                 status:true,
        //                 fileType:'jpg',
        //                 suffix:'jpg'

        //               },
        //               {
        //                 file:"20240730103350894s4961b10001.pdf",
        //                 applSeq:"10042024073012648159",
        //                 src:"",
        //                 label: '测试 3',
        //                 type: 'file',
        //                 status:true,
        //                 fileType:'jpg',
        //                 suffix:'jpg'

        //               },
        //               {
        //                 file:"20240730103350894s4961b10001.pdf",
        //                 applSeq:"10042024073012648159",
        //                 src:"",
        //                 label: '测试 4',
        //                 type: 'file',
        //                 status:true,
        //                 fileType:'jpg',
        //                 suffix:'jpg'

        //               },
        //             ]
        //           },
        //           {
        //             label: 'Folder 2',
        //             children: [
        //               {
        //                 label: 'File 3',
        //                 type: 'file',
        //                 src: 'http://localhost:9195/1111.pdf',
        //                 status:true,
        //                 suffix:'pdf'
        //               }
        //             ]
        //           }
        //     ]
        //   },
        // ],
        
        idNo:'',
        imageSrc:'',
        selectedNode: {},
        contextmenuVisible: false,
        clickCount: 0,
        doubleClickInterval: 300,   //双击间隔时间设定，单位毫秒
        fits: "fill",
        text:'',
        isZoomed: false, 
        activeFiles:[],
        activeTabName:''
      };
    },


  
    created(){
      //根据身份证号查询客户影像资料数据：
      var zjhm = sessionStorage.getItem('idNo')//身份证号
      console.log(this.idNumber)
      console.log(this.sqbh)
      if(this.idNumber!==undefined && this.idNumber.length>0){
        this.query(this.idNumber)
      }else{
        this.idNo = zjhm
        this.query(zjhm)
      }

    },

    // mounted(){
    //   console.log('测试0813 mounted')
    //   console.log(this.props)
    //   console.log(this.idNumber)
    // },



    watch:{
        '$route':function(to,from){
          console.log("监听【客户影像资料查询模块】route变化")
          this.$destroy();
        }
    },



    // watch: {  
    //   // 监视 customerImageData 的变化  
    //   customerImageData: {  
    //     handler(newValue) {  
    //       // 当 customerImageData 更新时，预览第一个节点  
    //       if (newValue && newValue.length > 0) {  
    //         this.previewFirstNode(newValue[0]);  
    //       }  
    //     },  
    //     deep: true // 设置为 true 以监视数组内部的变化  
    //     // 注意：我们没有设置 immediate 为 true，因为我们只在数据实际变化时预览  
    //   }  
    // },  


    methods: {

      //查询文件列表
      query(str){
        let self = this
        console.log("开始查询影像资料文件列表：");
        if(str && str.length>0){
          var param = {}
          param.idNo = str
          param.flag = '0'
          param.children = {}
          Axios.post(window.CONFIG.idpServerUrl + '/biz/camel/imageViewByYcms',param)
                .then((res) => {
                    if (res.status === 200){
                      //console.log(res);
                      self.customerImageData = res.data.data.data
                      if(this.sqbh!==undefined && this.sqbh.length>0){
                        let targetElement = res.data.data.data.find(item => item.label === this.sqbh)
                        if(targetElement){
                          // 移除找到的元素  
                          let index = res.data.data.data.indexOf(targetElement);  
                          res.data.data.data.splice(index, 1);  
                          
                          // 将元素插入到数组的最前面  
                          res.data.data.data.unshift(targetElement);
                          self.customerImageData = res.data.data.data

                        }



                      }
                      //查找并预览第一个可预览的图片文件 
                      //self.previewClick(res.data.data.data[0].children[0]); 
                      //console.log('预览第一个文件')
                    }else{
                        // 处理非200状态码的情况  
                        console.error('Failed to download file:', res.status); 
                    }
                }).catch((error) => {
                    console.error('There was an error downloading the file:', error);
                });

        }

      },


      //废弃⚠️
      previewFirstNode(node) {  
      // 如果节点是数组（可能有子节点），则递归查找第一个非数组节点  
      if (Array.isArray(node)) {  
        for (let child of node) {  
          if (!Array.isArray(child)) {  
            return this.previewClick(child); // 直接调用 previewClick  
          } else {  
            // 如果子节点还是数组，递归查找  
            this.previewFirstNode(child);  
          }  
        }  
      } else {  
        // 如果节点不是数组，直接预览  
        this.previewClick(node);  
      }   
    },  

      //节点被点击时触发：预览
      previewClick(node,data) {
        console.log(node)
        console.log(data)
        
       
        var level = data.level
        console.log('附件树根节点被点击:'+level)
        var param = {}
        if(level !== 1){
          var zjhm = sessionStorage.getItem('idNo')//身份证号
          console.log('进行预览')
          var childrenData = {}
          if(level === 2){
            childrenData.children = node.children
            param.applSeq = data.parent.data.label2
          }else if(level === 3){
            var list = []
            list.push(node)
            childrenData.children = list
            param.applSeq = data.parent.parent.data.label2

          }
            param.flag = '1'  
            param.children = JSON.stringify(childrenData)
            
            param.idNo = this.idNo
            console.log('测试')
            console.log(param)
            
            Axios.post(window.CONFIG.idpServerUrl + '/biz/camel/imageViewByYcms',param)
                .then((res) => {
                    if (res.status === 200){
                      console.log('111111')
                      console.log(res)
                      this.activeFiles = res.data.data.data
                      
                    }else{
                        // 处理非200状态码的情况  
                        console.error('Failed to download file:', res.status); 
                    }
                }).catch((error) => {
                    console.error('There was an error downloading the file:', error);
                });

            
          

        }
        
          
          //this.imageSrc = "data:image/"+suffix+";base64,"+fileBase64




          // // 重置点击计数
          // if (this.clickCount > 0) {
          //   clearTimeout(this.timer);
          // }
          // // 设置计数器
          // this.clickCount++;
          // this.timer = setTimeout(() => {
          //   this.clickCount = 0;
          // }, this.doubleClickInterval);
          // // 双击操作
          // if (this.clickCount === 2) {
          //   // 在这里执行双击节点后的操作
          //   //在新浏览器页签中打开
          //   window.open(this.selectedNode.url, '_blank');
          //   // 重置计数器
          //   this.clickCount = 0;
          // }
        
          


        
      },


     base64ToArrayBuffer(base64) {  
      
          return Buffer.from(base64, 'base64').buffer;  
      },

      //附件被右键点击触发：
      handleNodeContextMenu(e, node) {
        console.log('右键点击下载附件')
        console.log(e)
        console.log(node)
        e.preventDefault();
        
        this.$confirm('是否下载此附件?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log('开始下载附件')
          var name = node.file
          var list = this.activeFiles.find(item => item.file === name)
          console.log(list)
          if(list != undefined){
            console.log('无需调用核心接口下载')
            var base64str = list.base64
            const fileBlob = this.base64ToArrayBuffer(base64str);  
            const blob = new Blob([fileBlob]);
                const url = window.URL.createObjectURL(blob);
                const link = document.createElement('a');
            link.href = url;  
            // 设置下载的文件名，你也可以从响应头中获取文件名  
            link.setAttribute('download', node.label);   
            document.body.appendChild(link);  
            link.click();  
            // 清理  
            document.body.removeChild(link);  
            window.URL.revokeObjectURL(url);
            console.log('下载成功')
            // this.$message({
            //   type: 'success',
            //   message: '下载成功!'
            // });


          }else{
            console.log('调用核心接口下载')
            var param = {}
            param.flag = '2'
            param.children = {}
            param.idNo = this.idNo
            param.fileName = node.file
            param.applSeq = node.applSeq
            Axios.post(window.CONFIG.idpServerUrl + '/biz/camel/imageViewByYcms',param,{ responseType: 'blob' })
              .then((res) => {
                  if (res.status === 200){
                    console.log('111111')
                    console.log(res)
                    const fileBase64 = res.data.data.base64;  
                    const fileBlob = this.base64ToArrayBuffer(fileBase64);  
                    const blob = new Blob([fileBlob]);
                        const url = window.URL.createObjectURL(blob);
                        const link = document.createElement('a');
                    link.href = url;  
                    // 设置下载的文件名，你也可以从响应头中获取文件名  
                    link.setAttribute('download', node.label);   
                    document.body.appendChild(link);  
                    link.click();  
                    // 清理  
                    document.body.removeChild(link);  
                    window.URL.revokeObjectURL(url);
                    console.log('下载成功')
                    // this.$message({
                    //   type: 'success',
                    //   message: '下载成功!'
                    // });
                    
                  }else{
                      // 处理非200状态码的情况  
                      console.error('Failed to download file:', res.status); 
                  }
              }).catch((error) => {
                  console.error('There was an error downloading the file:', error);
              });

          }
          
          
        }).catch(() => {
          console.log('已取消下载')        
        });
      },

      handleContextmenuCommand(command) {
        if (command === 'download') {
          window.open(this.selectedNode.url, '_blank');
        }
      },

      //数据重置
      restAll(){
        console.log('重置【客户影像件查看】页面数据')

      }


    }
  };
  </script>
  <style scoped>
    .imageView {  
      display: flex;  
      justify-content: center; /* 水平居中 */  
      align-items: center; /* 垂直居中 */  
      overflow: hidden; /* 防止图片放大时溢出 */  
      width: 1000px;
      height: 1000px;
    }

    .el-image.zoomed {  
      transform: scale(1.2); /* 放大1.2倍 */  
    } 

  </style>
  